//路由页面
import React, { Suspense } from 'react';
import { HashRouter as Router, useRoutes, Navigate } from 'react-router-dom';
import { connect } from 'react-redux';
//路由表文件
import routes from './config';
//路由配置
import './index.scss'
import MyFooter from '../components/myfooter';
import { SpinLoading } from 'antd-mobile'

//写路由表
const App = (props) => {
    function transRoutes(routes) {
        const list = [];//整理后的路由表
        const isLogin = props.token !== '' ? true : false;
        routes.forEach(route => {
            const obj = { ...route };
            if (obj.redirect) {
                obj.element = <Navigate to="/login" replace={true} />;
            }
            if (!isLogin) {//没登录
                if (obj.auth) {//这个页面是需要路由守卫的状态值
                    obj.element = <Navigate to="/login" replace={true} />
                }
            }
            ['redirect', 'page', 'meta'].forEach(name => delete obj[name]);
            list.push(obj);
        })
        return list;
    }
    const GetRouters = () => useRoutes(transRoutes(routes))
    return <Router>
        <MyFooter />
        <div className="content">
            <Suspense fallback={<div> <SpinLoading color='primary' style={{ margin: '250px auto' }} /></div>}>

                <GetRouters />

            </Suspense>
        </div>
    </Router>
}



export default connect(state => ({ token: state.user.token || '' }))(App);